<template>
  <div>
    <el-card>
      <el-row>
        <el-col :span="16">
          <el-input v-model="searchQuery" placeholder="搜索..." clearable @input="handleSearch" />
        </el-col>
        <el-col :span="8" class="button-container">
          <el-button type="success" icon="el-icon-s-tools" @click="goToManageProcedures">
            管理规程
          </el-button>
          <el-button type="primary" icon="el-icon-plus" @click="goToAddPerson">添加人员</el-button>
        </el-col>
      </el-row>
    </el-card>

    <el-table :data="filteredData" style="width: 100%" stripe>
      <el-table-column prop="account" label="账号" />
      <el-table-column prop="name" label="姓名" />
      <el-table-column prop="gender" label="性别" />
      <el-table-column prop="position" label="职位名称" />
      <el-table-column prop="lastLogin" label="最后登录时间" />
      <el-table-column prop="status" label="状态">
        <template #default="scope">
          <el-tag :type="scope.row.status === '正常' ? 'success' : 'danger'">
            {{ scope.row.status }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button icon="el-icon-view" circle @click="handleView(scope.row)" />
          <el-button icon="el-icon-edit" circle @click="handleEdit(scope.row)" />
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script lang="ts">
import { ref, onMounted, computed, defineComponent } from "vue";
import { useRouter } from "vue-router";
// import { fetchDataFromBackend, searchBackend, fetchDetail, updateData } from "@/api/duty";

const searchQuery = ref("");
const data = ref([]);

// 初始化路由
const router = useRouter();

// 数据初始化
onMounted(async () => {
  try {
    const response = await fetchDataFromBackend();
    data.value = response.data;
  } catch (error) {
    console.error("数据加载失败", error);
  }
});

const filteredData = computed(() => {
  return data.value.filter(
    (item) => item.name.includes(searchQuery.value) || item.account.includes(searchQuery.value)
  );
});

// 搜索功能
const handleSearch = async () => {
  try {
    const response = await searchBackend(searchQuery.value);
    data.value = response.data;
  } catch (error) {
    console.error("搜索失败", error);
  }
};

// 查看详细信息
const handleView = async (row) => {
  try {
    const response = await fetchDetail(row.account);
    console.log("详细信息", response.data);
  } catch (error) {
    console.error("获取详细信息失败", error);
  }
};

// 编辑功能
const handleEdit = async (row) => {
  try {
    const response = await updateData(row);
    console.log("编辑成功", response.data);
  } catch (error) {
    console.error("编辑失败", error);
  }
};

// 跳转到管理规程页面
const goToManageProcedures = () => {
  router.push({ name: "ManageProcedures" });
};

// 跳转到添加人员页面
const goToAddPerson = () => {
  router.push({ name: "AddPerson" });
};

export default defineComponent({
  name: "DutyIndex",
  setup() {
    return {
      searchQuery,
      filteredData,
      handleSearch,
      handleView,
      handleEdit,
      goToManageProcedures,
      goToAddPerson,
    };
  },
});
</script>

<style scoped>
.button-container {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
</style>
